<template>
    <div>
        <Header/>
        <Sidebar/>
        <div class="content-box">
            <Tags/>
            <div class="content">
                <router-view v-slot="{ Component }" :class="{ 'content-collapse': collapse }" >
                    <transition name="move" mode="out-in">
                        <keep-alive :include="tagsList">
                            <component :is="Component"/>
                        </keep-alive>
                    </transition>
                </router-view>
            </div>
        </div>
    </div>
</template>

<script>
import Header from "@/components/Header";
import Sidebar from "@/components/Sidebar";
import Tags from "@/components/Tags";
export default {
    name: "Home",
    components: {
        Tags,
        Sidebar,
        Header
    },
    computed:{
        tagsList(){
            return this.$store.state.tagsList;
        },
        collapse(){
            return this.$store.state.collapse;
        }
    }
}
</script>

<style scoped>

</style>